<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>服装款式</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
   	<script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/date.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery-ui-1.8.4.js"></script>
    <script type="text/javascript" src="${ctxStatic}/producePlanJsView/jquery.ganttView.js"></script>

    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/list.css">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/jquery-ui-1.8.4.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/producePlanJsView/jquery.ganttView.css" />
    <script>

        var ganttData = [
                <c:forEach items="${planList}" varStatus="status" var="plan">
            {
                No: "${status.index+1}",
                planId: "${plan.planNO}",
                cus:"${plan.ognizationName}",
                oderNum:"<fmt:formatNumber value="${plan.planQuantity}" pattern="#,##0" />",
                startDate:"<fmt:formatDate value="${plan.planBeginDate}" pattern="yyyy-MM-dd" />",
                endDate:"<fmt:formatDate value="${plan.planEndDate}" pattern="yyyy-MM-dd" />",
                deliveryDate:"<fmt:formatDate value="${plan.planDeliveryDate}" pattern="yyyy-MM-dd" />",
                producePlan:"<fmt:formatNumber value="${plan.planPeriod+(1-(plan.planPeriod%1))%1}" type="number" pattern="#" />",
                produceLicense:"${plan.groupName}",
                tempid:"${plan.id}",
                planStatus:"${plan.planStatus}",
                series: [ { name: "生产计划",  start: new Date("<fmt:formatDate value="${plan.planBeginDate}" pattern="yyyy-MM-dd" />"), end: new Date("<fmt:formatDate value="${plan.planEndDate}" pattern="yyyy-MM-dd" />") }]
            }
            <c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        $(function () {
            $("#ganttChart").ganttView({
                data: ganttData,
                slideWidth: 900
            });
        });

    $(function(){
        $(".tabBox ul li").each(function(){
            var index=$(this).index();

            $(".tabBox ul li").eq(0).addClass("active");

            $(this).click(function(){

                //alert(index);

                $(this).addClass("active").siblings().removeClass("active");

                //$(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
				$("#ulSelected").val($(this).val());
				var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
				var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
				var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
				if(tabodyH>tableScrollH){
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
				}else{
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
				}

            })

        })

    })
        //检索 
    function searchListForm() {
        $("#searchForm").submit();
	}
        
	//重置
	function clean() {
		$("input").val("");
		$("select").val("");
		searchListForm();
	}   
	
	
	//JS代码
	var timer = null;

	//左侧DIV的滚动事件
	function moveUp_Left()
	{
	    //先删除右侧DIV的滚动事件，以免自动触发
	    $("#test_Right").removeAttr("onScroll");

	    //正常设值，同步两个DIV的滚动幅度
	    $("#test_Right").scrollTop($("#test_Left").scrollTop());
	    
	    //取消延迟预约。【重点】鼠标滚动过程中会多次触发本行代码，相当于不停的延迟执行下面的预约
	    clearTimeout(timer);

	    //延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
	    timer = setTimeout(function() {
	        $("#test_Right").attr("onScroll","moveUp_Right();");
	    }, 300 );
	}

	//右侧DIV的滚动事件（原理同上）
	function moveUp_Right()
	{
	    $("#test_Left").removeAttr("onScroll");
	    $("#test_Left").scrollTop($("#test_Right").scrollTop());
	    clearTimeout(timer);
	    timer = setTimeout(function() {
	        $("#test_Left").attr("onScroll","moveUp_Left();");
	    }, 300 );
	}

    </script>
    <style type="text/css">
    /* 采购合同号  */
    .table-cghth{width: 100px}
    /* 供货商(乙方) */
    .table-cgghs{width: 150px}
    /* 种类  */
    .table-cgzl{width: 80px}
    /* 订料数量  */
    .table-cgdlsl{width: 100px}
    /* 订料金额  */
    .table-cgdlje{width: 100px}
    /* 签订日期  */
    .table-cgqdrq{width: 100px}
    /* 结算日期  */
    .table-cgjsrq{width: 100px}
    /* 预订到料日期  */
    .table-cgyddl{width: 100px}
    /* 实际到料日期  */
    .table-cgsjdl{width: 100px}
    /* 创建人员  */
    .table-cgcjr{width: 80px}
    /* 创建时间  */
    .table-cgcjrq{width: 100px}
    
    </style>
</head>
<body>
<form id="searchForm">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
                <div class="searchInp clearfix">
                <!-- 客户名称  -->
                    <p>客户名称</p>
                    <input class="w-styleNub" name="ognizationName" value="${ognizationName}">
                </div>
                <div class="searchInp clearfix">
                <!-- 班组名称  -->
                    <p>班组名称</p>
                    <div class="searchInp">
                            <select  name="userGroupID" id="groupId" style="width: 120px">
                                <option value="0"><spring:message code="order_please_choose"/></option>
                                <c:forEach items="${groupList}" var="group">
                                    <option value="${group.userGroupID}" <c:if test="${group.userGroupID == userGroupID}"> selected </c:if>>${group.groupName}</option>
                                </c:forEach>
                            </select>
                        </div>
                </div>
                <div class="searchInp clearfix">
                <!-- 日期  -->
                    <p><spring:message code="purchase_contract_date" /></p>
                    <div class="timeBox">
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
								id="dateStart" name="dateStart" style="width: 110px" value="${dateStart}">
							<p class="list">~</p>
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})" id="dateEnd" name="dateEnd"
								style="width: 110px" value="${dateEnd}">
                    </div>        
                </div>               
            </div>
            <div class="searchRight clearfix">
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check" /></button>
                <button type="button" onclick="clean();"><spring:message code="common_reset" /></button>
                <button type="button" onclick="popup('1000px','650px','${ctx}/produce/plan/createPlan')"><spring:message code="purchase_contract_create" /></button>
            </div>
        </div>
        </div>
        <input type="hidden" id="ulSelected" name="ulSelected" value="0">
    
    <div class="tabBox">
        <ul class="clearfix">
            <li class="active" value="0">全部</li>
        </ul>
	</div>
   <div class="listBg tabPadding overflowX">
        <div class="tableArea tabBoxSm">
            <div class=" tabSm">
                <div id="ganttChart"></div>
                <br/><br/>
                <div id="eventMessage"></div>
            </div>            
        </div>
    </div>

</div> 
</form>
</body>
</html>
